<template>
    <div class="warpper-box">
      <div class="inner_box">
       <form-create 
       v-model="params.fApi" 
       :rule="params.rule" 
       :option="params.option" 
       @btn-search-click="loadList(true)" />
      <system-list
       :key="keys"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel" 
       :models="tables" 
       @on-search-click="loadList"
       @on-edit-click="edit"
       @on-config-click="config"/>

      <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
          <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="form.visible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onFormSubmit">保存</el-button>
          </div>
      </el-dialog>
      <el-dialog :title="node.title" :visible.sync="node.visible" :width="node.width" :close-on-click-modal="false">
          <div class="node-set">
            <el-button size="mini" style="margin-right: 166px;" type="primary" @click="setUser('发起申请',form.id==1?1:11)" icon="el-icon-s-custom">发起申请</el-button>
            <p class="link m1"></p>
            <el-button size="mini" style="margin-right: 166px;" type="success" @click="setUser('内勤审核',form.id==1?2:12)" icon="el-icon-s-custom">内勤审核</el-button>
            <p class="link m2"></p>
            <el-button size="mini" style="margin-right: 156px;" type="success" @click="setUser('分管领导审核',form.id==1?3:13)" icon="el-icon-s-custom">分管领导审核</el-button>
            <el-button size="mini" type="danger" icon="el-icon-video-pause">审批结束</el-button>
            <p class="link m3"></p>
            <div class="node-end">
              <p class="link-end"></p>
              <p class="link-end2"></p>
              <el-button size="mini" type="success" @click="setUser('总经理审核',form.id==1?4:14)" icon="el-icon-s-custom">总经理审核</el-button>
            </div>
          </div>
          <el-dialog
            width="800px"
            :title="title"
            :visible.sync="userVisible"
            append-to-body>
            <el-checkbox-group v-model="roleCheckbox" size="small">
              <el-checkbox v-for="(items,index) in roleList" :key="index" :label="items.id" border>{{items.name}}</el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="userVisible = false">取 消</el-button>
              <el-button size="mini" type="primary" @click="onUserSubmit">保存</el-button>
            </div>
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="node.visible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { 
    PARAMS_NODE,
    NODE_FORM,
    NODE_LABEL,
    NODE_SET_LABEL,
    NODE_SET_LABEL2,
    OPTION_INLINE,
    OPTION_BLOCK
  } from "./systemUser/system_form"
  import SystemList from "./systemUser/system_list"
  import { getNodeList,saveNode,saveAllUserRole,getStateUser} from "@/api/system_api"
  import store from '@/store'
  export default {
    components:{
      SystemList
    },
    data() {
      return {
        keys:1,
        params:{
          fApi:{},
          rule:PARAMS_NODE,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          width:'180',
          tableData:[],
          tableLabel: NODE_LABEL
        },
        form:{
          id:'',
          title:'工作流编辑',
          width:"600px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        node:{
          id:'',
          title:'工作流人员配置',
          width:"1000px",
          visible:false,
        },
        page:{
          pageNum:1,
          pageSize:100,
        },
        userVisible:false,
        title:'发起申请',//配置角色标题
        roleCheckbox:[],//选中角色
        userCheckbox:[],//选中用户
        roleList:[],//角色列表
        userList:[],//用户列表
      };
    },
    mounted() {
      this.loadList(true);
    },
    methods: {
      async loadList(formData) {
        let params = this.params.fApi.bind();
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const req = await getNodeList(params);
        if(req.code === 200){
          this.tables.tableData = req.data.list;
          this.tables.tableData.forEach(v=>{
            v.config=true;
            v.edit=true;
          })
          this.tables.total = req.data.total;
        }
      },
      //编辑
      edit(row){
        this.form.rule = NODE_FORM;
        this.form.id = row.id;
        this.$nextTick(()=>{
          this.form.fApi.setValue({"name":row.name,"remarks":row.remarks})
        });
        this.form.visible = true;
      },
      async onFormSubmit() {
        this.form.fApi.submit(async (formData, $f) => {
          try {
            formData.id = this.form.id;
            const req = await saveNode(formData);
            if(req.code === 200){
              this.$message.success('操作成功！');
              this.form.visible = false;
              this.loadList();
            }
          } catch (error) {}
        });
      },
      config(row){
        this.form.id = row.id;
        this.node.visible = true;
      },
      //配置人员
      async setUser(title,stateId){
        this.roleList = await store.dispatch('user/getAllRole');
        const req = await getStateUser(stateId);
        if(req.code === 200){
          
          this.node.id = stateId;//每节点状态;
          this.roleCheckbox = [];
          let roleIds = req.data.roleIds.split(',');
          if(roleIds.includes('0')){
            this.roleCheckbox= [];
          }else{
            this.roleCheckbox= roleIds.map(Number);
          }
          this.title = this.form.id === 1 ? '物资采购-'+title:'劳务采购-'+title;
          this.userVisible = true;
        }
      },
      async onUserSubmit(){
        if(this.roleCheckbox.length === 0){
          return this.$message.error('最少要配置一个角色');
        }
        let params = {
          roleIds:this.roleCheckbox.join(','),
          userIds:'',
          id:this.node.id
        }
        let req = await saveAllUserRole(params);
        if(req.code === 200){
          this.$message.success('配置成功！');
          this.userVisible = false;
        }
      }
    }
  };
  </script>
<style>
  .node-set{
    position: relative;
    display: block;
    padding: 10px;
    font-size: 22px;
  }
  .node-end{
    text-align: center;
    margin-left: 230px;
    margin-top: 155px;
  }
  .m1{
    position: absolute;
    left: 120px;
    top: 12px;
    width: 130px;
    height: 28px;
    margin: 0;
  }
  .m2{
    position: absolute;
    left: 382px;
    top: 12px;
    width: 130px;
    height: 28px;
    margin: 0;
  }
  .m3{
    position: absolute;
    right: 160px;
    top: 12px;
    width: 130px;
    height: 28px;
    margin: 0;
  }
  .link:after,
.link:before {
    content: "";
    display: block;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.link:before {
    top: 50%;
    right: 0;
    width: 1em;
    height: 1em;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate(0, -0.5em) rotate(45deg);
    transform: translate(0, -0.5em) rotate(45deg);
    box-shadow: inset -0.2em 0.2em 0 0 #409EFF;
    border-radius: 0 0.15em 0 0;
}
.link:after {
    top: 50%;
    right: 0;
    width: 120px;
    height: 0.2em;
    -webkit-transform: translate(0, -0.1em);
    transform: translate(0, -0.1em);
    background-color: #409EFF;
}
.link-end{
  position: absolute;
    right: 300px;
    top: 96px;
}
.link-end:after,
.link-end:before{
  content: "";
    display: block;
    position: absolute;
}
.link-end:before {
  top: 51px;
    right: 49px;
    width: 1em;
    height: 1em;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate(0, -0.5em) rotate(135deg);
    transform: translate(0, -0.5em) rotate(135deg);
    box-shadow: inset -0.2em 0.2em 0 0 #409EFF;
    border-radius: 0 0.15em 0 0;
}
.link-end:after {
    top: 50%;
    right: 0;
    width: 120px;
    height: 0.2em;
    -webkit-transform: translate(0, -0.1em) rotate(90deg);
    transform: translate(0, -0.1em) rotate(90deg);
    background-color: #409EFF;
}

.link-end2{
  position: absolute;
    right: 100px;
    top: 0px;
}
.link-end2:after,
.link-end2:before{
  content: "";
    display: block;
    position: absolute;
}
.link-end2:before {
  top: 50px;
    right: 15px;
    width: 1em;
    height: 1em;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate(0, -0.5em) rotate(10deg);
    transform: translate(0, -0.5em) rotate(10deg);
    box-shadow: inset -0.2em 0.2em 0 0 #409EFF;
    border-radius: 0 0.15em 0 0;
}
.link-end2:after {
  top: 112px;
    right: -7px;
    width: 210px;
    height: 0.2em;
    -webkit-transform: translate(0, -0.1em) rotate(140deg);
    transform: translate(0, -0.1em) rotate(140deg);
    background-color: #409EFF;
}
</style>